require("../less/run.less")

//页面加载完毕
document.ready(() => {
    //顶部
    window.$utils.showTopName("run");
    //底部
    window.$utils.showTabbar("run");
    //获取dom
    let userId = JSON.parse(localStorage.getItem("users")).userId;
    let goBtn = document.querySelector("#goBtn") //按钮go
    let countDownMask = document.querySelector("#countDownMask") //倒计时
    let countDownNum = document.querySelector("#countDownNum") //倒计时的数字
    let dataModeMask = document.querySelector("#dataModeMask") //数据模式蒙层
    let totalNum = document.querySelector("#totalNum");//累积跑步距离
    let mapModeMask = document.querySelector("#mapModeMask")//地图模式蒙层
    let takeTime = document.querySelector("#takeTime") //跑步时间
    let pauseBtn = document.querySelector("#pauseBtn") //暂停按钮
    let continueBtn = document.querySelector("#continueBtn")//继续按钮
    let stopBtn = document.querySelector("#stopBtn")//结束按钮
    let backBtn = document.querySelector("#backBtn")//返回按钮
    let finishBtn = document.querySelector("#finishBtn")//完成按钮
    let iconLocation = document.querySelector("#iconLocation")//定位图标
    let cardTakeTime = document.querySelector("#cardTakeTime")//地图模式里面的用时
    // 跑步时间
    let second = 0;
    let time = null;

    //积累跑步
    function getRunKm() {
        axios.get(window.$utils.BASE_URL + "/sports/exerciseData?id=" + userId)
            .then((res) => {
                let result = res.data;
                console.log("sss", res.data);
                if (result.status === 0) {
                    let runkm = result.data.runkm;//获取累积跑步距离
                    totalNum.textContent = runkm.toFixed(2); //显示到页面
                }
            })
            .catch((error) => {
                console.log( error);
            })
    }
    //地图
    initMap();
    function initMap() {
        var map = new BMap.Map("initMap");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // console.log(r);
                let lng = r.longitude;//经度
                let lat = r.latitude;//纬度
                var point = new BMap.Point(lng, lat);
                map.centerAndZoom(point, 12);
                //隐藏地图标记
                let baiduFlags = document.querySelectorAll(".anchorBL");
                baiduFlags.forEach(function (v) {
                    v.style.display = "none";
                })

            }
            else {
                alert('failed' + this.getStatus());
            }
        });
    }

    //go按钮的事件
    goBtn.addEventListener("click", function () {
        // alert(888)
        //显示蒙层
        countDownMask.style.display = "block"
        //倒数
        let nums = [3, 2, 1, "GO"];
        let index = 0;
        countDownNum.textContent = nums[index];
        let time = window.setInterval(function () {
            index++;
            if (index > nums.length - 1) {
                //清除计时器
                window.clearInterval(time);
                //显示数据蒙层
                dataModeMask.style.display = "block";
                //隐藏倒数计时蒙层
                countDownMask.style.display = "none";
                starRun();
            } else {
                countDownNum.textContent = nums[index];
            }
        }, 1000)
    })

    //地图
    getRunKm();
    modalityMap()
    function modalityMap() {
        var map = new BMap.Map("modalityMap");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            console.log(11)
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                console.log(r);
                let lng = r.longitude;//经度
                let lat = r.latitude;//纬度
                var point = new BMap.Point(lng, lat);
                map.centerAndZoom(point, 12);
                //隐藏地图标记
                let baiduFlags = document.querySelectorAll(".anchorBL");
                baiduFlags.forEach(function (v) {
                    v.style.display = "none";
                })

            }
            else {
                alert('failed' + this.getStatus());
            }
        });
    }
    //定义函数跑步的
    function starRun() {
        clearInterval(time);
        time = window.setInterval(function () {
            second++;
            let strTime = window.$utils.secondToHMS(second);
            //显示时间在数据中
            takeTime.textContent = strTime;
            //时间显示在地图中
            // cardTakeTime.textContent = strTime;
        }, 1000)
    }
    //暂停按钮
    pauseBtn.addEventListener("click", function () {
        //  alert(666)
        //停止定时器 
        window.clearInterval(time);
        //显示继续按钮
        continueBtn.style.display = "block";
        //显示结束按钮
        stopBtn.style.display = "block";
        //隐藏暂停按钮
        pauseBtn.style.display = "none";
    })
    //继续按钮
    continueBtn.addEventListener("click", function () {
        //继续跑
        starRun();
        //显示暂停按钮
        pauseBtn.style.display = "block";
        //隐藏自己
        continueBtn.style.display = "none";
        //隐藏结束按钮
        stopBtn.style.display = "none";
    })
    //结束按钮
    stopBtn.addEventListener("click", function () {
        //地图模态框弹出
        mapModeMask.style.display = "block";
        //显示完成按钮
        finishBtn.style.display = "block";
        //隐藏返回按钮
        backBtn.style.display = "none";
         modalityMap()
    })
    /* 定位图标按钮 */
    iconLocation.addEventListener("click", function () {
        //1 弹出地图模式蒙层

        mapModeMask.style.display = "block";
        //显示返回按钮
        backBtn.style.display = "block";
        // 隐藏完成按钮
        finishBtn.style.display = "none";
    })

    /* 返回按钮 */
    backBtn.addEventListener("click", function () {
        //隐藏地图模式蒙层
        mapModeMask.style.display = "none";

    })
    /* 完成按钮 */
    finishBtn.addEventListener("click", function () {

        //隐藏地图模式蒙层

        mapModeMask.style.display = "none";
        //隐藏数据模式蒙层
        dataModeMask.style.display = "none";
        console.log("发请求，保存运动数据.....");
    })






})
